<template>
  <!-- 新增配置 -->
  <div class="add-popup colbetweenbox mediumtablestyle">
    <div class="top betweenbox">
      <div class="top-left">
        <div class="content-tree">
          <el-input placeholder="输入关键字进行过滤" v-model="stationTree">
            <i slot="prefix" class="el-input__icon el-icon-search search"></i>
          </el-input>
          <div class="margin"></div>
          <el-tree
            :data="treeData1"
            icon-class="custom"
            :props="defaultProps"
            ref="tree1"
            @node-click="handleNodeClick1"
            :filter-node-method="filterNode"
          >
            <div class="custom-tree-node betweenbox" slot-scope="{ node }">
              <div>
                <span>{{ node.label }}</span>
              </div>
            </div>
          </el-tree>
        </div>
      </div>
      <div class="top-right">
        <div class="content-tree">
          <el-input placeholder="输入关键字进行过滤" v-model="deviceTree">
            <i slot="prefix" class="el-input__icon el-icon-search search"></i>
          </el-input>
          <div class="margin"></div>
          <el-tree
            :data="treeData2"
            icon-class="custom"
            :props="defaultProps"
            ref="tree"
            @node-click="handleNodeClick2"
            :filter-node-method="filterNode"
          >
            <div class="custom-tree-node betweenbox" slot-scope="{ node }">
              <div>
                <span>{{ node.label }}</span>
              </div>
            </div>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="point">
      <div class="point-name">点位关联信息</div>
      <div class="point-content">
        <div class="betweenbox">
          <div class="centerbox">点位名称</div>
          <div class="centerbox">关联设备</div>
        </div>
        <div class="betweenbox">
          <div class="centerbox">{{obj.pointName}}</div>
          <div class="centerbox">{{obj.deviceName}}</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-checkbox">
        配置管理：
        <el-checkbox v-model="obj.voiceAlarm">语音提醒</el-checkbox>
        <el-checkbox v-model="obj.openVideo">弹出视频</el-checkbox>
        <el-checkbox v-model="obj.takePhoto">抓拍</el-checkbox>
        <el-checkbox v-model="obj.recordVideo">录像</el-checkbox>
      </div>
      <div class="bottom-content betweenbox">
        <div class="bottom-content-item">
          <div class="bottom-content-item-title centerbox">遥控输出</div>
          <div class="bottom-content-item-tree centerbox">
            <div class="content-tree">
              <el-input placeholder="输入关键字进行过滤" v-model="remoteControlTree">
                <i slot="prefix" class="el-input__icon el-icon-search search"></i>
              </el-input>
              <div class="margin"></div>
              <el-tree
                :data="treeData3"
                icon-class="custom"
                :props="defaultProps"
                 ref="remoteControl"
                @check-change="handleNodeClick3"
                :filter-node-method="filterNode"
                 show-checkbox
                :default-checked-keys="remoteControlID"
                node-key="id"
              >
                <div class="custom-tree-node betweenbox" slot-scope="{ node }">
                  <div>
                    <span>{{ node.label }}</span>
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="bottom-content-item">
          <div class="bottom-content-item-title centerbox">门禁输出</div>
          <div class="bottom-content-item-tree centerbox">
            <div class="content-tree">
              <el-input placeholder="输入关键字进行过滤" v-model="entranceGuardTree">
                <i slot="prefix" class="el-input__icon el-icon-search search"></i>
              </el-input>
              <div class="margin"></div>
              <el-tree
                :data="treeData4"
                icon-class="custom"
                :props="defaultProps"
               ref="entranceGuard"
                @check-change="handleNodeClick4"
                :filter-node-method="filterNode"
                 show-checkbox
                :default-checked-keys="entranceGuardID"
                node-key="id"
              >
                <div class="custom-tree-node betweenbox" slot-scope="{ node }">
                  <div>
                    <span>{{ node.label }}</span>
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="bottom-content-item">
          <div class="bottom-content-item-title centerbox">视频输出</div>
          <div class="bottom-content-item-tree centerbox">
            <div class="content-tree">
              <el-input placeholder="输入关键字进行过滤" v-model="videoPositionTree">
                <i slot="prefix" class="el-input__icon el-icon-search search"></i>
              </el-input>
              <div class="margin"></div>
              <el-tree
                :data="treeData5"
                icon-class="custom"
                :props="defaultProps"
                ref="video"
                @check-change="handleNodeClick5"
                :filter-node-method="filterNode"
                show-checkbox
                :default-checked-keys="videoID"
                node-key="id"
              >
                <div class="custom-tree-node betweenbox" slot-scope="{ node }">
                  <div>
                    <span>{{ node.label }}</span>
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="bottom-content-item">
          <div class="bottom-content-item-title centerbox">巡检任务输出</div>
          <div class="bottom-content-item-tree colcenterbox">
            <div class="content-tree">
              <el-input placeholder="输入关键字进行过滤" v-model="taskTree">
                <i slot="prefix" class="el-input__icon el-icon-search search"></i>
              </el-input>
              <div class="margin"></div>
              <el-tree
                :data="treeData6"
                icon-class="custom"
                :props="defaultProps"
                  ref="taskT"
                @check-change="handleNodeClick6"
                :filter-node-method="filterNode"
                show-checkbox
                :default-checked-keys="taskTID"
                node-key="id"
              >
                <div class="custom-tree-node betweenbox" slot-scope="{ node }">
                  <div>
                    <span>{{ node.label }}</span>
                  </div>
                </div>
              </el-tree>
            </div>
            <div class="content-btn centerbox">
              <div
                class="btn centerbox"
                :class="{active:changestatus==='1'}"
                @click="changeStatus('1')"
              >启用</div>
              <div
                class="btn centerbox"
                :class="{active:changestatus==='2'}"
                @click="changeStatus('2')"
              >禁用</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn centerbox">
      <el-button type="primary" @click="handleSave">确认</el-button>
      <el-button type="primary" @click="handleClose">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { publicAPIModule } from "@/store/modules/public";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { Tree } from "element-ui";
interface optionList {
  value: string;
  label: string;
}
interface tableDataType {
  controlType?: string;
  controlEquipment?: string;
  controlposition?: any;
}
interface treeItem {
  children?: treeItem[];
  menu: boolean;
  name: string;
}
@Component
export default class extends Vue {
  obj: any = {
    pointName: "",
    deviceName: "",
    openVideo: false, //是否弹出视频
    recordVideo: false, //录像
    takePhoto: false, //是否抓拍
    voiceAlarm: false, //是否声音提醒
  };
  // 树图的搜索过滤字段
  stationTree: string = "";
  deviceTree: string = "";
  entranceGuardTree: string = ""; //门禁输出配置
  remoteControlTree: string = ""; //遥控输出配置
  taskTree: string = ""; //巡检任务输出配置
  videoPositionTree: string = ""; //视频输出配置

  // 树图选中的内容 传参
  entranceGuard = []; //门禁输出配置
  remoteControl = []; //遥控输出配置
  task = []; //巡检任务输出配置
  videoPosition = []; //视频输出配置

  paramsOBJ: any = {
    entranceGuard: [
      // {
      //   id: "",
      //   linkageId: "",
      //   operationId: "",
      //   operationMethod: "",
      //   operationParam: "",
      // },
    ],
    id: "",
    linkageSubject: "", //联动主体id  不能为空
    openVideo: true,
    recordVideo: true,
    remoteControl: [
      // {
      //   id: "",
      //   linkageId: "",
      //   operationId: "",
      //   operationMethod: "",
      //   operationParam: "",
      // },
    ],
    takePhoto: true,
    task: [
      // {
      //   id: "",
      //   linkageId: "",
      //   operationId: "",
      //   operationMethod: "",
      //   operationParam: "",
      // },
    ],
    triggerMethod: "",
    triggerParam: "1",
    videoPosition: [
      // {
      //   id: "",
      //   linkageId: "",
      //   operationId: "",
      //   operationMethod: "",
      //   operationParam: "",
      // },
    ],
    voiceAlarm: true,
  };

  defaultProps: Object = {
    children: "child",
    label: "name",
  };
  // 变电站
  // treeData1: any = [];
  // 右上设备
  treeData2: any = [];
  // 遥控输出
  treeData3: any = [];
  // 门禁输出
  treeData4: any = [];
  // 视频输出
  treeData5: any = [];
  // 巡检任务输出
  treeData6: any = [];

  changestatus: string = "1";


//遥控输出 树图选中ID
remoteControlID=[]
//门禁输出 树图选中ID
entranceGuardID=[]
//视频输出 树图选中ID
videoID=[]
//巡检任务输出 树图选中ID
taskTID=[]
  // 变电站
  get treeData1() {
    return publicAPIModule.stationTreeList;
  }
  $refs!: {
    tree1: Tree;
    tree2: Tree;
    tree3: Tree;
    tree4: Tree;
    tree5: Tree;
    tree6: Tree;
  };

  @Watch("stationTree")
  private watchfilterText1(val: string) {
    let tree = this.$refs.tree1;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }
  @Watch("deviceTree")
  private watchfilterText2(val: string) {
    let tree = this.$refs.tree2;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }
  @Watch("entranceGuardTree")
  private watchfilterText3(val: string) {
    let tree = this.$refs.tree3;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }
  @Watch("remoteControlTree")
  private watchfilterText4(val: string) {
    let tree = this.$refs.tree4;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }
  @Watch("taskTree")
  private watchfilterText5(val: string) {
    let tree = this.$refs.tree5;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }
  @Watch("videoPositionTree")
  private watchfilterText6(val: string) {
    let tree = this.$refs.tree6;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }

  mounted() {}

  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  // 联动配置右上方树树形结构 stationId	变电站ID
  queryLinkagePointerTreeChild(params) {
    (this as any).$services
      .queryLinkagePointerTreeChild({ data: params })
      .then((result: any) => {
        this.treeData2 = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 遥控输出
  fetchOperatePointerTree(params) {
    (this as any).$services
      .getOperatePointerTree({ data: params })
      .then((result: any) => {
        this.treeData3 = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 门禁输出
  fetchEntranceGuard(params) {
    (this as any).$services
      .getOperatePointerTree({ data: params })
      .then((result: any) => {
        this.treeData4 = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 获取视频预置位树树形结构（视频）
  fetchVideoTreeChild(params) {
    (this as any).$services
      .getVideoTreeChild({ data: params })
      .then((result: any) => {
        this.treeData5 = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 获取关联点位任务树树形结构（巡检任务）
  fetchLinkageTaskTree(params) {
    (this as any).$services
      .getLinkageTaskTree({ data: params })
      .then((result: any) => {
        this.treeData6 = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 树图1点击事件
  handleNodeClick1(data: any) {
    // console.log(data);
    if (!data.child) {
      this.queryLinkagePointerTreeChild({ stationId: data.id });
      this.fetchEntranceGuard({ isQueryEntranceGuard: 1, stationId: data.id });
      this.fetchOperatePointerTree({
        isQueryEntranceGuard: 2,
        stationId: data.id,
      });
      this.fetchVideoTreeChild({ stationId: data.id });
      this.fetchLinkageTaskTree({ stationId: data.id });
    }
  }

  // 树图2点击事件
  handleNodeClick2(data: any) {
    // console.log(data);
    if (!data.child) {
      if (data.id.indexOf("#") > 0) {
        // console.log(data);
        // 联动主体
        this.paramsOBJ.linkageSubject = data.id;
        //  根据点位ID获取点位基本信息
        var params = {
          id: data.id,
        };
        (this as any).$services
          .getPointerInfoById({ data: params })
          .then((result: any) => {
            if (result.data) {
              this.obj.pointName = result.data.name;
              this.obj.deviceName = result.data.deviceName;
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
      } else {
        this.$message({
          type: "warning",
          message: "暂无点位",
        });
      }
    }
  }
  // 树图3点击事件
  handleNodeClick3(data: any) {
  // if (!data.child) {
    //   var datas = [
    //     {
    //       operationId: data.id,
    //     },
    //   ];
    //   this.paramsOBJ.remoteControl = datas;
    // }
     this.paramsOBJ.remoteControl=[]
    let res=(this as any).$refs.remoteControl.getCheckedNodes()
     this.paramsOBJ.remoteControl=res  ||[]
  }
  // 树图4点击事件
  handleNodeClick4(data: any) {
   // if (!data.child) {
    //   var datas = [
    //     {
    //       operationId: data.id,
    //     },
    //   ];
    //   this.paramsOBJ.entranceGuard = datas;
    // }
    this.paramsOBJ.entranceGuard=[]
    let res=(this as any).$refs.entranceGuard.getCheckedNodes()
     this.paramsOBJ.entranceGuard=res  ||[]
  }
  // 树图5点击事件
  handleNodeClick5(data: any) {
    // if (!data.child) {
    //   var datas = [
    //     {
    //       operationId: data.id,
    //     },
    //   ];
    //   this.paramsOBJ.videoPosition = datas;
    // }
      this.paramsOBJ.videoPosition=[]
    let res=(this as any).$refs.video.getCheckedNodes()
    this.paramsOBJ.videoPosition=res ||[]
  }
  // 树图6点击事件
  handleNodeClick6(data: any) {
    // if (!data.child) {
    //   var datas = [
    //     {
    //       operationId: data.id,
    //     },
    //   ];
    //   this.paramsOBJ.task = datas;
    // }
      this.paramsOBJ.task=[]
    let res=(this as any).$refs.taskT.getCheckedNodes()
     this.paramsOBJ.task=res  ||[]
  }
  changeStatus(val: string) {
    this.paramsOBJ.triggerParam = val;
    this.changestatus = val;
  }
  // 取树图底层id
  quTreeID(vla){
    var list=[]
    vla=vla ||[]
    console.log(vla);
      vla.map((item) => {
        if (!item.child) {
          list.push({ operationId: item.id });
        }
      });
    return list
  }
  handleSave() {
    // console.log("this.paramsOBJ:", this.paramsOBJ);
     this.paramsOBJ.remoteControl= this.quTreeID(this.paramsOBJ.remoteControl);
   this.paramsOBJ.entranceGuard= this.quTreeID(this.paramsOBJ.entranceGuard);
   this.paramsOBJ.videoPosition= this.quTreeID(this.paramsOBJ.videoPosition);
   this.paramsOBJ.task= this.quTreeID(this.paramsOBJ.task);
    if (this.paramsOBJ.linkageSubject) {
      this.$emit("handleSave", this.paramsOBJ);
    } else {
      this.$message({
        type: "warning",
        message:
          "联动主体不能为空，请通过左上树图选择变电站，右上树图选择点位！",
      });
    }
  }
  handleClose() {
    this.$emit("handleClose");
  }
}
</script>

<style lang="scss" scoped>
.add-popup {
  width: 100%;
  height: auto;
  .top {
    width: 100%;
    height: 2.2rem;
    box-sizing: border-box;
    padding: 0 0.1rem;
    > div {
      width: 50%;
      height: 100%;
      padding: 0.1rem;
      box-sizing: border-box;
      border: 1px solid #04b0f0;
      overflow-y: auto;
    }
    > div:first-child {
      border-right: 0px solid #04b0f0;
    }
  }
  .point {
    width: 100%;
    height: 0.9rem;
    margin: 0.1rem auto;
    box-sizing: border-box;
    padding: 0 0.1rem;
    &-name {
      height: 0.3rem;
      line-height: 0.3rem;
    }
    &-content {
      width: 100%;
      height: 0.6rem;
      border-top: 1px solid #04b0f0;
      border-left: 1px solid #04b0f0;
      > div {
        width: 100%;
        height: 50%;
        > div {
          width: 50%;
          height: 100%;
          border-right: 1px solid #04b0f0;
          border-bottom: 1px solid #04b0f0;
        }
      }
      > div:first-child {
        background: rgba(41, 171, 226, 0.2);
      }
    }
  }
  .bottom {
    width: 100%;
    height: 3rem;
    padding: 0.1rem 0.1rem 0 0.1rem;
    box-sizing: border-box;
    &-checkbox {
      width: 100%;
      height: 0.3rem;
    }
    &-content {
      width: 100%;
      height: 2.5rem;
      border-top: 1px solid #04b0f0;
      border-left: 1px solid #04b0f0;
      &-item {
        width: 25%;
        height: 100%;
        border-right: 1px solid #04b0f0;
        border-bottom: 1px solid #04b0f0;
        &-title {
          width: 100%;
          height: 0.3rem;
          background: rgb(51, 91, 178);
          margin-bottom: 0.1rem;
          box-sizing: border-box;
        }
        &-tree {
          width: 100%;
          height: calc(100% - 0.4rem);
          .content-tree {
            width: 100%;
            height: 100%;
            overflow: auto;
            text-align: center;
          }
          .content-tree:last-child {
            width: 100%;
            height: calc(100% - 0.26rem);
            overflow: auto;
            text-align: center;
          }
          .content-btn {
            width: 100%;
            height: 0.26rem;
            .btn {
              width: 0.8rem;
              height: 0.26rem;
              margin: 0 0.1rem;
              cursor: pointer;
              border: 1px solid #05b4ff;
              border-radius: 0.03rem;
            }
            .btn:hover {
              background: #234d74;
            }
            .active {
              background: linear-gradient(
                360deg,
                rgba(20, 123, 252, 1) 0%,
                rgba(12, 157, 254, 1) 40%,
                rgba(3, 191, 255, 1) 100%
              );
              color: #fff;
            }
          }
        }
      }
    }
  }
  .btn {
    width: 100%;
    height: 0.4rem;
    margin: 0.2rem auto 0;
    box-sizing: border-box;
  }
}
</style>
<style lang="scss">
.add-popup {
  .el-input {
    width: 2rem;
  }
}
</style>
